<template>
  <div class="box">
      <div class="top">
       <img src="https://img2.baidu.com/it/u=2508198481,2343860048&fm=253&fmt=auto&app=120&f=JPEG?w=720&h=383" alt="">
      </div>
      <div class="list">
        <div class="btn">
            <!-- 如果0与下标相等 对应的变颜色-->
            <span @click="(num=index)" v-for="(item,index) in btnlist" :key="index" :class="{active:num==index}" >{{item.text}}</span>
        </div>
        <div class="spxx">
            <div class="item" v-for="(item,index) in (num == 0 ? tasklist : list ) " :key="index">
                <div class="img">
                    <img :src="item.picture" alt="">
                </div>
                <div class="text">
                <p class="name">{{item.name}}</p>
                <p class="pingjia  ">买一送一,用心火烤，吃得放心,买的安心</p>
                <div class="jiage">
                    <div class="left">
                        <p>爆爆团价格</p>
                        <p class="money">￥{{item.min_price}} <span class="zhekou" >6.8折</span> </p>
                    </div>
                    <div class="right">
                        <button  v-on:click="changeStatus(item)">{{item.status==0?"马上抢":"已抢到"}}</button>
                        <p class="yishou">{{item.month_saled_content}}</p>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>

  </div>
</template>

<script>
// 导入请求函数
import { api_tuan_list } from '../ulits/api';
export default {
    data(){
        return{
            num:0,
            btnlist:[
                {text:"正在抢购"},
                {text:"上新预告"}
            ],
            tasklist:[],
            list:[],
        }
    },
    methods:{
            changeStatus(item){  //这个方法的参数是你点击的任务对象
                // console.log("更改任务状态");
                // console.log(v);
                if(item.status==1){
                    item.status=2
                }else{
                    item.status=2
                }
            }
    },
    mounted(){
        // 发正在抢购的请求
        api_tuan_list({status:0}).then((res)=>{
          console.log(res.data);
         res.data.list.forEach((element) => {
           this.tasklist.push(element);
      });
        })
        // 发上新预告的请求
        api_tuan_list({status:1}).then((res)=>{
          console.log(res.data);
         res.data.list.forEach((element) => {
        this.list.push(element);
      });
          this.list = res.data.list;
          this.list.map((item)=>{
              item.status=0
        })
        })
    }
}
</script>

<style scoped >

.top{
    height: 150px;
    padding: 2px;
}
.top img{
  width: 100%;
  height: 100%;
}
h3{
  line-height: 30px;
  margin-bottom: 30px;
}
.list {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding:  0px  10px;
}
.list .btn {
    font-size: 20px;
}
.list .btn .active{
    color: red;
    font-weight: 700;
}

.list span {
    margin-right: 10px;
}
.list .spxx{
    flex: 1;
    overflow: auto;
}
.item{
    display: flex;
    margin-bottom: 8px;
}
.item .img {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin: 5px 5px 5px 0px;
}
.item .img img{
    width: 100%;
    height: 100%;
}

.item .text{
    margin: 5px ;
    flex: 1;
    height: 118px;
}
.item .text .name{
    margin: 0;
}
.item .text .pingjia{
    margin: 0;
}
.item .text .jiage{
    display: flex;
    justify-content: space-between;
}
.jiage .left{
    color: orangered;
    font-size: 12px;
}
.jiage .left p{
    margin: 0;
}
.jiage .left .money{
    font-size: 18px
}
.jiage .left .money .zhekou{
    display: inline-block;
    border: 1px solid orangered;
    border-radius: 5px;
    font-size: 12px;
}
.jiage .right button{
    width: 70px;
    height: 30px;
    background-color: orangered;
    color: white;
    border: none;
    border-radius: 30px;
}
.jiage .right .yishou{
    font-size: 12px;
    color: orangered;
    text-align: center;
    margin: 0;
}
</style>